<template>
    <div id="sign_in">
        <div>
            <el-card>
                <div v-show="signIn==1">
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="title"
                                label="名称">
                            <template slot-scope="scope">
                                <span v-if="scope.$index==0">第一天</span>
                                <span v-if="scope.$index==1">第二天</span>
                                <span v-if="scope.$index==2">第三天</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="read_time"
                                label="阅读时间">
                        </el-table-column>
                        <el-table-column
                                prop="coin"
                                :label="this.$store.state.name">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="warning" plain size="small" @click="edit(scope.row.id)">
                                    修改
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-card>
            <!--            新增或编辑-->
            <el-dialog :title="fromTitle" width="50%" :visible.sync="visible">
                <el-row :gutter="20">
                    <el-col :span="15">
                        <el-form ref="form" label-width="150px" size="small">
                            <el-form-item label="阅读时间">
                                <el-input v-model="form.read_time"></el-input>
                            </el-form-item>
                            <el-form-item :label="this.$store.state.name">
                                <el-input v-model="form.coin"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sign_in",
        data() {
            return {
                form: {
                    coin: '',
                    read_time:''
                },
                tableData: [],
                visible: false,
                fromTitle: '',
                key_id: '',
                signIn: '1',
                id: ''

            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                this.$axios.post('admin/invite_rule/index', {}).then((res) => {
                    let obj = res.data;
                    let arr = [];
                    for (let key  in obj) {
                        arr.push(obj[key])
                    }
                    this.tableData = arr;
                });
            },
            dialogClose() {
                this.visible = false
            },
            edit(id) {
                this.fromTitle = '修改';
                this.id = id;
                this.$axios.get('admin/invite_rule/' + id, {}).then((res) => {
                    this.form = res.data;
                    this.visible = true;
                });
            },
            dialogAffirm() {
                this.$axios.put('admin/invite_rule/' + this.id, this.form).then((res) => {
                    this.$message('成功');
                    this.getData();
                    this.visible = false
                });
            },
        }
    }
</script>

<style scoped>

</style>